'use strict'
import React, { Component, PropTypes } from 'react'


const FooterItem = React.createClass({


    getInitialState() {
        return {
            footerState:'index'
        }
    },

    checkState(action){
        return action === this.state.footerState ? "on" : ""
    },



    render() {



        return(
            <ul>

                {
                    React.Children.map( this.props.children , ( element,index ) => {
                        return(
                            <li>
                                <a href={element.props.url} className={ this.checkState( element.props.action) } onClick={ () => { this.setState({ footerState : element.props.action }) } }>
                                    <div className="nav">
                                        <div className={element.props.class}></div>
                                        <p>{element.props.name}</p>
                                    </div>
                                </a>
                            </li>

                        )
                    })
                }




            </ul>
        )


    }


})


class Footer extends Component {

    render() {

        const action = this.props.action;

        return (
            <div className="footer">

                <FooterItem>
                    <li url="/#/index" name="首页" action="index" class="ih ispr"/>
                    <li url="/#/product/category" name="分类" action="category" class="ic ispr"/>
                    <li url="/#/cart/index" name="购物车" action="cart" class="is ispr"/>
                    <li url="/#/user/index" name="我的" action="me" class="if ispr"/>
                </FooterItem>

            </div>
        )

    }
}

export default Footer;